<template>
	<view class="page">
		<block v-if="!boxHide">
			<view class="bar_top">
				<view class="search">
					<view class="search_input">
						<image src="/static/images/search.png" mode=""></image>
						<input type="text" v-model="title" placeholder="请输入关键词"/>
						<image src="/static/images/empty_btn.png" @click.stop="emptyValue" v-show="showEmptyBtn"></image>
					</view>
					<view class="search_btn" @tap="getData(1)">搜索</view>
				</view>

				<view class="bar_list">
					<view :class="barNum == 0 ? 'bar_item bar_active' : 'bar_item'" @tap="bar(0)">
						<text>配件</text>
					</view>
					<view :class="barNum == 1 ? 'bar_item bar_active' : 'bar_item'" @tap="bar(1)">
						<text>附件</text>
					</view>
				</view> 

			</view>
			
			<view class="library_list">
				<block v-for="(item,index) in list">
					<view class="accessories_item" :key="index">
						<view class="accessories_item_content">
							<view class="accessories_item_name">名称：{{item.title}}</view>
							<view class="accessories_item_num">
								<text>数量：{{item.stock}}</text>
								<text>编号：{{item.number}}</text>
							</view>
							<view class="accessories_item_time">{{item.create_at}}</view>
						</view>
						<view class="accessories_item_btn">
							<view @tap="toGetDetails(item.product_id)">领取明细</view>
						</view>
					</view>
				</block>
			</view>
			
			<!-- <view class="library_prompt">共5件，还有3件未核销</view> -->
		</block>
		<view class="total_view">
			<text>总数量:{{total.num}}</text>
			<text>合计:￥{{total.price}}</text>
		</view>
		<Loading ref="load"></Loading>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				boxHide:true,
				list:[],
				loading:true,
				page:1,
				title:"",
				showEmptyBtn:false,
				barNum:0, // 0 配件    1 附件
				total:{
					num:0,
					price:0
				}
			}
		},
		onShow() {
			if(this.$app.globalData.upData.accessoriesLibrary){
				this.getData(1);
			}
		},
		onReachBottom() {
			if(this.loading){
				this.getData(3);
			}
		},
		onUnload() {
			// this.$app.globalData.upData.accessoriesLibrary = false
		},
		methods:{
			emptyValue(){
				this.title='';
				this.getData(1);
			},
			getData(type){
				this.$refs.load.initLoading({loadType:type}).then(res =>{
					this.boxHide = false;
					if(type == 1 || type == 2){this.list = [];this.page = 1;this.loading = true;this.$app.globalData.upData.accessoriesLibrary = true}
					
					let upJson = {page:this.page,user_id:uni.getStorageSync("userId")};
					if(this.title.length>0){
						upJson.title = this.title;
					}

					if(this.barNum == 0){
						upJson.product_type = 1;
					}else{
						upJson.product_type = 2;
					}

					// getMyAccessoriesList： 我的配件库接口
					// getMyAccessoriesReceiveList:  我的配件领取明细列表
					this.$api.getMyAccessoriesList(upJson).then(res => {
						this.total.num=res.total_num;
						this.total.price=res.total_settlement;
						this.$refs.load.getLoadingData({oldData:this.list,newData:res.data}).then(res => {
							this.list = res.list;
							this.loading = res.loading;
							this.page ++;
						});
					})
				})
			},
			bar(val){
				this.barNum = val;
				this.getData(1);
			},
			info(item){//查看详情
				if(item.status == 1){
					uni.navigateTo({
						url:"/pages/accessories/pay/pay?id=" + item.product_id
					})
				}else{
					uni.navigateTo({
						url:"/pages/accessories/info/info?id=" + item.product_id
					})
				}
				
			},
			toHandBack(item,type){ 
				uni.navigateTo({
					url:"/pages/accessories/handBank/handBank?productId="+item.product_id+"&type="+type+"&warehouseId="+item.warehouse_id+"&id="+item.id+"&num="+item.num+"&wareName="+item.ware_name
				})
			},
			toGetDetails(productId){ // 转至领用明细
				uni.navigateTo({
					url:"/pages/accessories/getDetails/getDetails?productId="+productId
				})
			}
		},
		watch:{
			title(val){
				this.showEmptyBtn=val==""?false:true;
			}
		}
	}
</script>

<style>
	.page {
		padding-bottom: 80rpx;
	}
	.total_view {
		position: fixed;
		bottom: 0;
		height: 80rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		background: #049BFF;
		z-index: 9;
		color: #fff;

	}
	.library_list{margin-top: 230upx;}
	.accessories_item{width: 690upx;margin: 30upx 0 0 30upx;padding: 30upx;box-sizing: border-box;background: #FFFFFF;font-size: 30upx;color: #333333;display: flex;flex-direction: row;align-items: center;}
	.accessories_item_content{flex-grow: 1;}
	.accessories_item_num{margin-top: 10upx;font-size: 24upx;color: #666666;}
	.accessories_item_num text:nth-child(2){margin-left: 20upx;}
	.accessories_item_time{font-size: 24upx;color: #999999;margin-top: 10upx;}
	.accessories_item_btn{
		/* flex-grow: 1; */
	}
	.accessories_item_btn view{
		padding: 10rpx;
		text-align: center;
		background: white;
		border: 2rpx solid #EEEEEE;
		border-radius: 10rpx;
		font-size: 25rpx;
	}
	.accessories_item_btn view:nth-child(1){
		margin-bottom: 10rpx;
	}
	.accessories_item_btn view:nth-child(2){
		 background-color: #049BFF;
		 color:white;
	}
	.library_prompt{width: 100%;text-align: center;font-size: 30upx;line-height: 100upx;color: #007AFF;}
</style>
